<template>
  <div class="divContainer">
    <a-card class="result-success" :bordered="false" style="width: 800px;display: none;">
      <result :is-success="true" :description="description" :title="title">
        <template slot="action">
          <a-button class="action" type="primary" @click="toApproval">同意授权</a-button>
          <!-- <a-button class="action">拒绝</a-button> -->
        </template>
        <div>
          <div class="project-name">项目名称:{{appInfo.appName}}</div>
          <div class="project-name"><img :src="appInfo.iconBase64" style="width: 100px;height: 100px"/></div>
          <!-- <div class="project-name">此应用请求获得以下权限：</div>
          <a-checkbox @change="onChange">
            访问您的个人信息
          </a-checkbox> -->

        </div>
      </result>
    </a-card>
  </div>
</template>

<script>

import apilogin from "@/api/login";

export default {
  name: 'authorisation',
  data() {
    return {
      title: '授权请求确认',
      description: ' ',
      dataS:'',
      appInfo:{
        clientId:"",
        appName:"",
        iconBase64:"",
        user_oauth_approval:"",
        approval_prompt:""
      }
    }
  },
  mounted() {
    this.initUrl()
  },
  methods: {
    toApproval(){
      apilogin.approval(this.appInfo).then(res=>{

        if(res.code==0){
          if (this.appInfo.approval_prompt == 'force') {
            this.$message.success(`提交成功`);
          }
          window.location.href = res.data;
        }
      })
    },
    onChange(e) {
      console.log(`checked = ${e.target.checked}`);
    },
    async initUrl () {
      const url = new URL(window.location.href);
      this.dataS = url.searchParams.get("oauth_approval");
      console.log(url,this.dataS)
      await apilogin.oauthv20(this.dataS).then((result) => {
        console.log(result)
        if (result) {
          console.log(result.data.clientId)
          this.appInfo.clientId=result.data.clientId
          this.appInfo.appName=result.data.appName
          this.appInfo.iconBase64=result.data.iconBase64
          this.appInfo.oauth_version=result.data.oauth_version
          this.appInfo.user_oauth_approval='true';
          this.appInfo.approval_prompt=result.data.approval_prompt;
        }
      }).catch((err) => {
        console.error(err);
      });

     await this.toApproval() //自动同意授权
    }
  }
}
</script>

<style scoped lang="less">
.divContainer {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.result-success {
  .action:not(:first-child) {
    margin-left: 8px;
  }
  .project-name {
    font-size: 16px;
    //color: @title-color;
    font-weight: 500;
    margin-bottom: 20px;
  }
}
</style>
